<template>
    <view class="mePage">
        <navigator class="header" url="/pages/personalCenter/userDetails">
            <view class="header_content_left">
                <!-- <image class="avatarUrl" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goumai.png"></image> -->
                <image class="avatarUrl" src="{{userObj.avatar ? userObj.avatar : 'https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/header.png'}}"></image>
            </view>
            <view class="header_content_right">
                <view class="nickName">
                    {{userObj.nickname ? userObj.nickname : '默认昵称'}}
                    <image wx:if="{{userObj.sex =='MALE' }}" class="imgSex" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/man.png"></image>
                    <image wx:if="{{userObj.sex =='FEMALE'}}" class="imgSex" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/woman.png"></image>
                </view>
                <view class="userCode">{{userObj.remark ? userObj.remark : ''}}</view>
                <image class="vipMark" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/VIP.png" wx:if="{{userObj.userType != 'NORMAL'}}"></image>
                <text class="vipText">{{userObj.userType=='NORMAL' ? '普通用户' : 'VIP'}}</text>
            </view>
        </navigator>
        <view class="info_block">
            <navigator class="vip_item" url="/pages/personalCenter/becomeVip" wx:if="{{userObj.userType == 'NORMAL'}}">
                <view class="item_content">
                    <view class="text">成为VIP</view>
                </view>
            </navigator>

            <navigator class="item" url="/pages/order/orderList?way=0">
                <view class="item_content">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goumai.png"></image>
                    <view class="text">购买</view>
                </view>
                <view class="arrow">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image>
                </view>
            </navigator>
            <navigator class="item" url="/pages/order/orderList?way=1">
                <view class="item_content">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goumai.png"></image>
                    <view class="text">出售</view>
                </view>
                <view class="arrow">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image>
                </view>
            </navigator>
            <navigator class="item" url="/pages/personalCenter/meranking">
                <view class="item_content">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/sort.png"></image>
                    <view class="text">排名</view>
                </view>
                <view class="arrow">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image>
                </view>
            </navigator>
            <navigator class="item" url="/pages/appraisal/appraisalList?from=me">
                <view class="item_content">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/jianding.png"></image>
                    <view class="text">鉴定</view>
                </view>
                <view class="arrow">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image>
                </view>
            </navigator>
            <navigator class="item" url="/pages/personalCenter/coupons">
                <view class="item_content">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/youhuijuan.png"></image>
                    <view class="text">优惠券</view>
                </view>
                <view class="arrow">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image>
                </view>
            </navigator>
            <navigator class="item" url="/pages/personalCenter/setting">
                <view class="item_content">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/youhuijuan.png"></image>
                    <view class="text">设置</view>
                </view>
                <view class="arrow">
                    <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/goto.png"></image>
                </view>
            </navigator>
        </view>
        <view class="info_block">
            <view class="item_content onlineServer">
                <view class="onlineServer_btn">
                    <image class="item_img_zaixian" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/kefu.png"></image>
                    <!-- <contact-button class="zaixian_btn" type="default-light" size="20" session-from="weapp">
                    </contact-button> -->
                    <!-- <text class="zaixian">在线客户</text> -->
                    <button size="mini" type="primary" open-type="contact" plain="true" id="my_contact">在线客服</button>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {USER_INFO, USER_ID} from '@/utils/constant'

    export default class me extends wepy.page {
      config = {
        // 配置当前页面
        navigationBarTitleText: '我的' // 头部标题
      }
      components = {}

      data = {
        avatarUrl:
          'https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/authorize.png',
        nickName: '默认名称',
        bShowBind: true,
        userObj: {}
      }
      async getUserInfo(phone, code) {
        // let that = this;
        // let userSpecialInfo = wepy.getStorageSync(USER_SPECICAL_INFO) || {};
        // let openId = userSpecialInfo.openid;
        // const json = await api.getUserInfo({
        //   query: {
        //     openId: openId
        //   }
        // });
        //
        // if (json.data.code == 0) {
        //   if (json.data.user.mobile.length>0) {
        //     this.bShowBind=false;
        //   } else {
        //     this.bShowBind = true;
        //   }
        //   that.$apply();
        // } else {
        //   tip.error(json.data.msg)
        // }
        // that.showLoading = false;
      }

      async user_info() {
        let that = this
        let user_id = wepy.getStorageSync(USER_ID) || ''
        api
          .getUserInformation(
            {
              query: {}
            },
            user_id
          )
          .then(function(res) {
            if (res.data.code == 0) {
              that.userObj = res.data.data
              that.$apply()
            } else {
              tip.error(res.data.msg)
            }
          })
      }

      onLoad() {
        let that = this
        that.user_info()
        // let userInfo = wepy.getStorageSync(USER_INFO);
        // that.avatarUrl = userInfo.avatarUrl;
        // that.nickName = userInfo.nickName;
      }
      onShow() {
        let that = this
        that.user_info()
      }
      computed = {}
      methods = {
        // 方法
      }
      events = {}
    }
</script>
<style lang="less">
.mePage {
    .header {
        background: #fff;
        height: 260rpx;
        width: 100%;
    }

    .header_content_right,
    .header_content_left {
        display: inline-block;
        vertical-align: middle;
        margin: 0 auto;
        text-align: left;
        padding-top: 48rpx;
        .vipText {
            font-size: 20rpx;
            color: #ffb023;
            padding-left: 5rpx;
        }
    }
    .header_content_left {
        margin-left: 28rpx;
    }
    .header_content_right {
        margin-left: 38rpx;
        padding-top: 38rpx;
    }

    .avatarUrl {
        display: inline-block;
        width: 122rpx;
        height: 122rpx;
    }
    .vipMark {
        width: 20rpx;
        height: 20rpx;
    }
    .nickName {
        position: relative;
        font-size: 40rpx;
        color: #333;
        .imgSex {
            width: 25rpx;
            height: 25rpx;
        }
    }
    .userCode {
        width: 400rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30rpx;
        color: #999;
    }

    .info_block {
        margin-top: 10rpx;
        .item {
            border-top: 1rpx solid #eee;
            background: #fff;
            padding: 20rpx 28rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .item:last-child {
            border-bottom: 1rpx solid #dbdbdb;
        }
        .item_content {
            display: flex;
            align-items: center;
            .text {
                margin-left: 20rpx;
                color: #333;
            }
        }
        .onlineServer {
            padding: 20rpx 0rpx;
            width: 100%;
            background: #fff;
            .onlineServer_btn {
                margin: 0 auto;
                text-align: center;
                position: relative;
                #my_contact {
                    border: none;
                    color: #333333;
                    top: 5rpx;
                    font-size: 30rpx;
                    padding-left: 70rpx;
                }
            }
            text-align: center;
        }
        .zaixian_btn {
            position: absolute;
            top: -16rpx;
            left: -150rpx;
            width: 500rpx;
            height: 80rpx;
            text-align: left;
        }
        .item_img_zaixian {
            width: 40rpx;
            height: 32rpx;
            vertical-align: middle;
            position: absolute;
            margin-top: -15rpx;
            top: 50%;
        }
        .zaixian {
            vertical-align: middle;
            padding-left: 10rpx;
        }
        .item_img {
            width: 30rpx;
            height: 30rpx;
        }
        .arrow {
            color: #cccccc;
            font-size: 32rpx;
        }
        .tip {
            color: #999;
            font-size: 24rpx;
            margin-top: 20rpx;
            margin-left: 60rpx;
        }

        .vip_item {
            .item_content {
                .text {
                    color: #0099ff;
                    margin-left: 30rpx;
                }
            }
        }
    }
}
</style>
